import React from "react";
import { connect } from "dva";
import { Form, Input,  Modal, Checkbox } from "antd";

const { TextArea } = Input;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const formItemLayout2 = {
  labelCol: { span: 9 },
  wrapperCol: { span: 12 },
};

@Form.create()
@connect(({ loading }) => ({
  loading: loading.effects["FlowConfigure/getModelDetail"],
}))
class BackConfig extends React.Component {
  state = {
    checked: ['ROLLBACK_TO_PRE'],
    nodeOperEventsData: [],
  };

  componentDidMount() {
    const { selectedModel = {} } = this.props;
    const { properties = {} } = (selectedModel || {}).model || {};
    const { nodeOperEvents = [] } = properties;
    this.setState({
      nodeOperEventsData: nodeOperEvents,
    });
    if (nodeOperEvents.find(v => v.nodeOperType === "ROLLBACK_TO_FIRST")) {
      this.setState({
        checked: ['ROLLBACK_TO_PRE', 'ROLLBACK_TO_FIRST'],
      })
    }
  }

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, propsHandleChangeProperties2, selectedModel, onCancel } = this.props;
    const handleChangeProperties2 = (...args) => {
      propsHandleChangeProperties2(...args);
      this.forceUpdate();
    };
    const nodeOperEvents = [];
    form.validateFields((err, values) => {
      const {
        preBeforeCallUrl = '',
        preBeforeRequestBody = '',
        preAfterCallUrl = '',
        preAfterRequestBody = '',
        firstBeforeCallUrl = '',
        firstBeforeRequestBody = '',
        firstAfterCallUrl = '',
        firstAfterRequestBody = '',
      } = values;
      if (err) {
        return;
      }
      if (preBeforeCallUrl) {
        nodeOperEvents.push({
          nodeOperType: "ROLLBACK_TO_PRE",
          operEventType: "BEFORE",
          callUrl: preBeforeCallUrl,
          requestBody: preBeforeRequestBody,
        })
      }
      if (preAfterCallUrl) {
        nodeOperEvents.push({
          nodeOperType: "ROLLBACK_TO_PRE",
          operEventType: "AFTER",
          callUrl: preAfterCallUrl,
          requestBody: preAfterRequestBody,
        })
      }
      if (firstBeforeCallUrl) {
        nodeOperEvents.push({
          nodeOperType: "ROLLBACK_TO_FIRST",
          operEventType: "BEFORE",
          callUrl: firstBeforeCallUrl,
          requestBody: firstBeforeRequestBody,
        })
      }
      if (firstAfterCallUrl) {
        nodeOperEvents.push({
          nodeOperType: "ROLLBACK_TO_FIRST",
          operEventType: "AFTER",
          callUrl: firstAfterCallUrl,
          requestBody: firstAfterRequestBody,
        })
      }
      handleChangeProperties2(
        "nodeOperEvents",
        nodeOperEvents,
        selectedModel.model,
        selectedModel.shape,
        false,
      );
      onCancel()
    });
  };

  handleCancel = () => {
    const { onCancel } = this.props;
    if (onCancel) {
      onCancel();
    }
  };

  onChange = (checkedValues) => {
    this.setState({
      checked: checkedValues,
    })
  }

  render() {
    const {
      form,
      visible,
    } = this.props;
    const { checked, nodeOperEventsData } = this.state;
    const { getFieldDecorator } = form;
    return (
      <Modal
        title="配置退回策略"
        width='800px'
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        destroyOnClose
        bodyStyle={{ height: '600px', overflowY: 'auto' }}
      >
        <Form>
          <Form.Item label="退回策略" {...formItemLayout}>
            {getFieldDecorator("nodeOperType", {
              initialValue: checked,
            })(
              <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange}>
                <Checkbox value="ROLLBACK_TO_PRE">退回上一节点</Checkbox>
                <Checkbox value="ROLLBACK_TO_FIRST">退回拟稿人</Checkbox>
              </Checkbox.Group>)}
          </Form.Item>
          {checked.indexOf('ROLLBACK_TO_PRE') !== -1 && (
          <>
            <Form.Item label="退回上一节点预处理函数" {...formItemLayout2} />
            <Form.Item label="预处理" {...formItemLayout}>
              {getFieldDecorator("preBeforeCallUrl", {
              initialValue: nodeOperEventsData.filter(v => v.nodeOperType === "ROLLBACK_TO_PRE" && v.operEventType === "BEFORE")[0]?.callUrl,
            })(<Input placeholder="请输入" />)}
            </Form.Item>
            <Form.Item label="requestBody" {...formItemLayout}>
              {getFieldDecorator("preBeforeRequestBody", {
                initialValue: nodeOperEventsData.filter(v => v.nodeOperType === "ROLLBACK_TO_PRE" && v.operEventType === "BEFORE")[0]?.requestBody,
              })(<TextArea
                rows={4}
                placeholder='请输入'
              />)}
            </Form.Item>
            <Form.Item label="后处理" {...formItemLayout}>
              {getFieldDecorator("preAfterCallUrl", {
                initialValue: nodeOperEventsData.filter(v => v.nodeOperType === "ROLLBACK_TO_PRE" && v.operEventType === "AFTER")[0]?.callUrl,
              })(<Input placeholder="请输入" />)}
            </Form.Item>
            <Form.Item label="requestBody" {...formItemLayout}>
              {getFieldDecorator("preAfterRequestBody", {
                initialValue: nodeOperEventsData.filter(v => v.nodeOperType === "ROLLBACK_TO_PRE" && v.operEventType === "AFTER")[0]?.requestBody,
              })(<TextArea
                rows={4}
                placeholder='请输入'
              />)}
            </Form.Item>
          </>
)}
          {checked.indexOf('ROLLBACK_TO_FIRST') !== -1 && (
            <>
              <Form.Item label="退回拟稿人预处理函数" {...formItemLayout2} />
              <Form.Item label="预处理" {...formItemLayout}>
                {getFieldDecorator("firstBeforeCallUrl", {
                  initialValue: nodeOperEventsData.filter(v => v.nodeOperType === "ROLLBACK_TO_FIRST" && v.operEventType === "BEFORE")[0]?.callUrl,
                })(<Input placeholder="请输入" />)}
              </Form.Item>
              <Form.Item label="requestBody" {...formItemLayout}>
                {getFieldDecorator("firstBeforeRequestBody", {
                  initialValue: nodeOperEventsData.filter(v => v.nodeOperType === "ROLLBACK_TO_FIRST" && v.operEventType === "BEFORE")[0]?.requestBody,
                })(<TextArea
                  rows={4}
                  placeholder='请输入'
                />)}
              </Form.Item>
              <Form.Item label="后处理" {...formItemLayout}>
                {getFieldDecorator("firstAfterCallUrl", {
                  initialValue: nodeOperEventsData.filter(v => v.nodeOperType === "ROLLBACK_TO_FIRST" && v.operEventType === "AFTER")[0]?.callUrl,
                })(<Input placeholder="请输入" />)}
              </Form.Item>
              <Form.Item label="requestBody" {...formItemLayout}>
                {getFieldDecorator("firstAfterRequestBody", {
                  initialValue: nodeOperEventsData.filter(v => v.nodeOperType === "ROLLBACK_TO_FIRST" && v.operEventType === "AFTER")[0]?.requestBody,
                })(<TextArea
                  rows={4}
                  placeholder='请输入'
                />)}
              </Form.Item>
            </>
          )}
        </Form>
      </Modal>
    );
  }
}
export default BackConfig;
